<!DOCTYPE html>
<link rel="match" href="../expected/clip-path-transformed-ref.html" />
<style>
    body {
        font-size: 0;
    }

    .outer {
        margin: 5px;
        width: 130px;
        height: 80px;
        display: inline-block;
        background-color: grey;
        outline: 2px solid black;
    }

    .inner {
        height: 100%;
        background-color: black;
        clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px);
    }
</style>
<div class="outer" style="transform: matrix(1, 2, 3, 4, 5, 6)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: perspective(17px)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: rotate(0.5turn)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: rotateX(10deg)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: rotateY(10deg)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: rotateZ(10deg)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translate(12px, 50%)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translate3d(12px, 50%, 3em)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translateX(2em)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translateY(3in)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translateZ(2px)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: scale(2, 0.5)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: scale3d(2.5, 1.2, 0.3)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: scaleX(2)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: scaleY(0.5)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: scaleZ(0.3)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: skew(30deg, 20deg)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: skewX(30deg)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: skewY(1.07rad)">
    <div class="inner"></div>
</div>
<div class="outer" style="transform: translateX(10px) rotate(10deg) translateY(5px)">
    <div class="inner"></div>
</div>
